<template>
  <LayoutTabs
    v-model:activeKey="activeKey"
    :options="FuncListTabs"
    type="card"
    :func-bean="funcBean"
  >
    <template #pane="{ tab }">
      <component :is="tab" :func-bean="funcBean"></component>
    </template>
  </LayoutTabs>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { Tabs, Panel } from '@jecloud/ui';
  import { FuncListBase, FuncListFields, FuncListCustom, FuncListPrint } from '../index';
  import { FuncListTabs } from '../../hooks/tabs-config';
  import LayoutTabs from './layout-tabs.vue';
  export default defineComponent({
    name: 'FuncListLayout',
    components: {
      Panel,
      PanelItem: Panel.Item,
      Tabs,
      TabPane: Tabs.TabPane,
      FuncListBase,
      FuncListFields,
      FuncListCustom,
      FuncListPrint,
      LayoutTabs,
    },
    props: { funcBean: Object, activedKey: String },
    setup(props) {
      const key = props.activedKey || FuncListTabs[1].key;
      const activeKey = ref(key);
      return { FuncListTabs, activeKey };
    },
  });
</script>
<style></style>
